<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>外出公干审批表</title>
    <link rel="stylesheet" href="./index.css" />
    <style>
      #goOut {
        height: 100vh;
        background-color: #f5f5f5;
      }
    </style>
  </head>

  <body>
    <div id="goOut">
      <van-form @submit="onSubmit" style="margin-bottom: 200px">
        <div>上班时间外出公干审批表</div>
        <div style="padding: 10px">
          <div
            style="background-color: #fff; padding: 0 px; border-radius: 5px"
          >
            <van-cell-group>
              <van-field label="申请人" value="输入框只读" readonly />
            </van-cell-group>
          </div>
        </div>
        <div style="padding: 10px">
          <div
            style="background-color: #fff; padding: 0 px; border-radius: 5px"
          >
            <van-cell-group>
              <van-field label="部门/单位" value="输入框只读" readonly />
            </van-cell-group>
          </div>
        </div>
        <div style="padding: 10px">
          <div
            style="background-color: #fff; padding: 0 px; border-radius: 5px"
          >
            <div>
              <van-field
                readonly
                clickable
                required
                name="datetimePicker"
                :value="startTime"
                label="出差开始日期"
                placeholder="点击选择出差开始日期"
                @click="showPopup('2')"
                :rules="[{ required: true, message: '请选择出差开始日期' }]"
              />
            </div>
            <div>
              <van-field
                readonly
                clickable
                required
                name="datetimePicker"
                :value="endTime"
                label="出差截止日期"
                placeholder="点击选择出差截止日期"
                @click="showPopup('3')"
                :rules="[{ required: true, message: '请选择出差截止日期' }]"
              />
            </div>
          </div>
        </div>
        <div style="padding: 10px">
          <div
            style="background-color: #fff; padding: 10px; border-radius: 5px"
          >
            <div style="font-size: 14px; color: #323233">
              <span style="color: red">*</span>事由
            </div>
            <van-field
              v-model="textValue"
              rows="3"
              autosize
              type="textarea"
              placeholder="请输入事由"
            />
          </div>
        </div>
        <div style="padding: 10px">
          <div
            style="background-color: #fff; padding: 10px; border-radius: 5px"
          >
            <div style="font-size: 14px; color: #323233">
              <span style="color: red">*</span>备注
            </div>
            <van-field
              v-model="remark"
              rows="3"
              autosize
              type="textarea"
              placeholder="请输入备注"
              :rules="[{ required: true, message: '请输入备注' }]"
            />
          </div>
        </div>
        <div style="padding: 10px">
          <div
            style="background-color: #fff; padding: 0 px; border-radius: 5px"
          >
            <van-cell title="说明附件">
              <template #right-icon>
                <van-uploader>
                  <van-icon name="plus" />
                </van-uploader>
              </template>
            </van-cell>
          </div>
        </div>
        <!-- <div style="margin: 16px; margin-bottom: 200px">
          <van-button round block type="info" native-type="submit"
            >提交</van-button
          >
        </div> -->
      </van-form>
      <div
        style="
          position: fixed;
          bottom: 0;
          left: 0;
          right: 0;
          padding: 15px;
          background-color: white;
          box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
          z-index: 1000;
        "
      >
        <van-button
          type="primary"
          block
          @click="onHold"
          style="margin-bottom: 10px"
        >
          暂存</van-button
        >
        <van-button type="danger" block @click="onSubmitApproval ">
          提交审批</van-button
        >
      </div>
      <van-popup position="bottom" v-model="show">
        <div v-if="popupType === '2'">
          <van-datetime-picker
            :value="startTime"
            type="datetime"
            title="选择完整时间"
            :min-date="minDate"
            :max-date="maxDate"
            @confirm="onPickerConfirm"
            @cancel="onCancel"
          />
        </div>
        <div v-else-if="popupType === '3'">
          <van-datetime-picker
            :value="endTime"
            type="datetime"
            title="选择完整时间"
            :min-date="minDate"
            :max-date="maxDate"
            @confirm="onPickerConfirm"
            @cancel="onCancel"
          />
        </div>
      </van-popup>
    </div>
  </body>
  <script src="./vue.min.js"></script>
  <script src="./vant.min.js"></script>
  <script>
    var goOut = new Vue({
      el: "#goOut",
      data() {
        const now = new Date();
        const minDate = new Date(now);
        minDate.setFullYear(now.getFullYear() - 1);
        const maxDate = new Date(now);
        maxDate.setFullYear(now.getFullYear() + 1);
        return {
          box: "",
          place: "",
          show: false,
          popupType: "",
          startTime: "", // 组件默认时间设置 今天请假开始时间
          endTime: "", // 组件默认时间设置 今天请假结束时间
          minDate, // 去年今日
          maxDate, // 明年今日
          textValue: "", // 请假事由
          radio: "", // 单选框
          remark: "", // 备注
          list: [
            { id: 1, name: "订单A", desc: "2025-10-23 14:30" },
            { id: 2, name: "订单B", desc: "2025-10-23 15:20" },
          ],
        };
      },
      computed: {},
      created() {},
      mounted() {},
      methods: {
        showPopup(value) {
          //  点击打开弹出层
          this.popupType = value;
          this.show = true;
        },
        onPickerConfirm(value) {
          //  点击确认选择日期
          if (this.popupType === "2") {
            this.startTime = this.formatDate(value);
          } else if (this.popupType === "3") {
            this.endTime = this.formatDate(value);
          }
          if (this.startTime && this.endTime) {
            console.log("都有值");
            const result = this.compareDates(this.startTime, this.endTime);
            console.log(result);
            if (!result) {
              this.onCancel();
              this.$toast("出差结束时间不能早于出差开始时间");
              this.onCancel();
            }
          }
          this.show = false;
        },
        onCancel() {
          // 点击取消选择日期
          if (this.popupType === "2") {
            this.startTime = "";
          } else if (this.popupType === "3") {
            this.endTime = "";
          }
          this.show = false;
        },
        formatDate(date) {
          // 格式化日期为 YYYY-MM-DD HH:mm 格式
          const year = date.getFullYear();
          const month = String(date.getMonth() + 1).padStart(2, "0");
          const day = String(date.getDate()).padStart(2, "0");
          const hours = String(date.getHours()).padStart(2, "0");
          const minutes = String(date.getMinutes()).padStart(2, "0");
          return `${year}-${month}-${day} ${hours}:${minutes}`;
        },
        compareDates(date1, date2) {
          const d1 = new Date(date1);
          const d2 = new Date(date2);

          // 检查是否为有效日期
          if (isNaN(d1.getTime()) || isNaN(d2.getTime())) {
            return "输入的日期格式无效，请检查日期格式";
          }

          const time1 = d1.getTime(); // 毫秒时间戳
          const time2 = d2.getTime();

          if (time1 < time2) {
            console.log("date1 在 date2 之前");
            return true;
          } else if (time1 > time2) {
            console.log("date1 在 date2 之后");
            return false;
          } else {
            console.log("date1 和 date2 是同一天");
            return false;
          }
        },
        onSubmit(values) {
          console.log("submit", values);
        },
        checkout() {
          // 判断每个都都有没值
          if (!this.startTime) {
            this.$toast("请选择出差开始日期");
            return false;
          }
          if (!this.endTime) {
            this.$toast("请选择出差截止日期");
            return false;
          }
          if (!this.textValue) {
            this.$toast("请填写事由");
            return false;
          }
          if (!this.remark) {
            this.$toast("请填写备注");
            return false;
          }
          return true;
        },
        onHold() {
          // 暂存
          if (!this.checkout()) {
            return;
          }
          console.log("暂存");
          console.log(this.startTime);
          console.log(this.endTime);
          console.log(this.textValue);
          console.log(this.remark);
        },
        onSubmitApproval() {
          // 提交审批
          if (!this.checkout()) {
            return;
          }
          console.log("提交审批");
        },
      },
    });
  </script>
</html>
